<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box1 {
            width: 700px;
            margin: 50px auto 0;

        }

        input {
            width: 650px;
            height: 40px;
            border: 0;
            outline: none;
            background-color: skyblue;
            caret-color: black;
            font-size: 30px;
            /* font-weight: 800; */
        }

        .box1 button {
            width: 46px;
            height: 40px;
            border: 0;
            cursor: pointer;
        }

        ul {
            width: 700px;
            margin: 0 auto;
        }

        li {
            width: 700px;
            height: 30px;
            border: 1px dashed black;
            line-height: 30px;

        }

        li+li {
            border-top: 0;
        }

        .box {
            width: 700px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box1">
        <input type="text">
        <button>搜索</button>

    </div>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>

    <div class="box">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="eq">第一个</button>
        <button class="siblings">siblings</button>
    </div>
    <script>
        function Getele(ele) {
            this.eles = document.querySelectorAll(ele)
            // console.log(this.eles);
        }
        Getele.prototype.each = function (fn) {
            // var list = []
            for (var i = 0; i < this.eles.length; i++) {
                var item = this.eles[i]
                var index = i
                // list.push(item)
                fn(index, item)
            }
            // console.log(list);
        }
        Getele.prototype.click = function (fn) {
            console.log(this);
            this.each(function (index, item) {
                item.onclick = function () {
                    fn()
                }

            })
        }
        Getele.prototype.css = function (key, val) {

            // console.log(arguments);

            if (arguments.length >= 2) {
                // console.log(this.eles);
                this.each(function (index, item) {
                    console.log(item.style);
                    item.style[key] = val
                })
            } else if ((typeof arguments[0]) == "object") {
                for (var k in arguments[0]) {
                    var ys = arguments[0][k]

                    this.each(function (index, item) {

                        item.style[k] = ys
                    })
                }
            } else {
                console.log();
                return this.else[0].style.key
            }
        }
        var y = new Getele(".css")
        y.click(function () {
            var x = new Getele("ul li")
            x.css({ "backgroundColor": "red" });
        })
        console.dir(Getele)
        console.log(Getele.__proto__ == Function);
        // console.log(new Getele(".eq"));"backgroundColor", "glod"


    </script>
</body>

</html>